<template>
	<view class="container  statusbar-height">
		<!-- <view :style="{height: BarHeight+'px'}"></view> -->
		<view class="header">
			<!-- 轮播图 -->
			<view class="banner"><image mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/system.png"></image></view>
			<!-- 头部导航与状态栏 -->
<!-- 			<view class="tab-statusbar">
				<view :style="{height: BarHeight+'px'}"></view>
				<view class="top-tabbar">
					<i class="iconfont" @click="backClick">&#xe641;</i>
					<view>开课成功</view>
					<view class="iconfont"></view>
				</view>
			</view> -->
		</view>
		<!-- 报名成功 -->
		<view class="apply-header">
		  <!-- <view class="sub-title">
		    <view>不积跬步，无以至千里</view>
		    <view>不积小流，无以成江海</view>
		  </view> -->
		  <view class="price-name">
		    <view class="subheading-price">
		      <view class="icon-succeed">
		         <view class="iconfont">&#xe644;</view>
		         <view class="succeed">报名成功</view>
		      </view>
		      <view class="price">
		        <view class="subTitle">思维建模体验课</view>
		        <view class="subTitle">2021.10.25开课·10258期 </view>
		      </view>
		    </view>
		  </view>
		</view>
    
		<view class="main">
      <!-- 下载app -->
      <view class="download">
        <view class="subtitle">微信关注——消息及时通知</view>
        <view class="title">【大爆炸思维】公众号</view>
        <view class="download-wap">
          <view class="click-icon-list" v-for="(item,index) in downIconList" :key="item.id">
            <view class="icon-title">
             <view class="icon-main"><image mode="aspectFill" :src="item.imgUrl"></image></view>
             <view class="flow-title">{{ item.title }}</view>
            </view>
          </view>
        </view>
        <view class="clickDownload" @click="clickSearc">复制公众号</view>
      </view>
		</view>
    <view class="bottom-title">大爆炸思维</view>
	</view>
</template>

<script>
  import luoButton from '../../components/botton/luo-botton.vue'
	export default {
    components: { luoButton },
		data() {
			return {
        isWxstatus: false,
        downIconList: [
          { 
            id: 1, title: '上课通知', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/inform.png'
          },
          { 
            id: 2, title: '学习报告', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/report.png'
          },
          { 
            id: 3, title: '老师点评', 
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/remark.png'
          }
        ],
				BarHeight:'', // 状态栏高度
        Loop:'',
			}
		},
    onLoad() {
     
    },
		onReady() {
			this.getBarheight()
		},
		methods: {
      backClick() { // 返回上一页
        uni.navigateBack({})
      },
		  getBarheight() { // 获取状态栏高度
		  const vm = this
			uni.getSystemInfo({
			    success: function (res) {
			        vm.BarHeight = res.statusBarHeight
			    }
			});  
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.container{
    background: #FFFFFF;
    color: #262626;
    image{
      width: 100%;
      height: 100%;
    }
		.header{
			position: relative;
			.banner{
        width: 100%;
        height: 440rpx;
        background: #FF800C;
        border-radius: 0px 0px 80rpx 80rpx;
        position: relative;
        z-index: 1;
			}
			.tab-statusbar{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
        z-index: 999;
				.top-tabbar{
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					padding: 0 24rpx;
				}
			}
		}
    // 头部报名成功样式
    .apply-header{
      width: 673rpx;
      position: relative;
      z-index: 2;
      margin: auto;
      margin-top: -50rpx;
      .sub-title{
        margin: 0 0 8rpx 32rpx; 
        font-size: 20rpx;
        color: #FFFFFF;
      }
      .price-name{
      	width: 673rpx;
        background: #FFFFFF;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
        border-radius: 40rpx;
        padding: 32rpx 0rpx 30rpx 32rpx;
        background: linear-gradient(180deg, #FFFAF4 0%, #FFFDFB 100%);
        .subheading-price{
          .subing{
            color: #8C8C8C;
            font-size: 24rpx;
          }
          .icon-succeed{
            display: flex;
            align-items: center;
            .iconfont{
              color: #FF800C;
              font-size: 40rpx;
            }
            .succeed{
              color: #262626;
              font-size: 32rpx;
              font-weight: bold;
              margin-left: 8rpx;
            }
          }
          .price{
            margin-left: 45rpx;
            .subTitle{
              font-size: 24rpx;
              color:#8C8C8C;
              font-weight: 400;
            }
          }
        }
      }
    }
    .main{

     // 下载app
     .download{
       width: 670rpx;
       height: auto;
       border-radius: 40rpx;
       background: linear-gradient(180deg, #FFF8F0 0%, #FFFDFB 100%);
       box-shadow: 0px 0px 40rpx rgba(0, 0, 0, 0.08);
       padding: 32rpx 48rpx;
       text-align: center;
       margin: auto;
       margin-top: 32rpx;
       .title{
         font-size: 32rpx;
         font-weight: bold;
         margin-bottom: 38rpx;
       }
       .subtitle{
         font-size: 24rpx;
       }
       .download-wap{
         display: flex;
         align-items: center;
         justify-content: space-around;
         margin-bottom: 52rpx;
         .click-icon-list{
         
           .icon-title{
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             .icon-main{
               width: 84rpx;
               height: 84rpx ;
             }
             .flow-title{
               font-size: 20rpx;
             }
           }
           .arrows{
             width: 84rpx;
             height: 48rpx;
             margin: 0 0rpx 20rpx 0;
           }
         }
          .click-icon-list:nth-of-type(2) {
            .arrows{
              margin-right: 20rpx;
            }
           }
       }
       .clickDownload{
         width: 284rpx;
         height: 64rpx;
         line-height: 64rpx;
         text-align: center;
         background:  #FF800C;
         font-weight: bold;
         font-size: 28rpx;
         color: #FFFFFF;
         border-radius: 32rpx;
         margin: auto;
       }
     }
    }
    .bottom-title{
      width: 100%;
      position: fixed;
      left: 0;
      right: 0;
      bottom: env(safe-area-inset-bottom);
      padding-bottom: 48rpx;
      text-align: center;
      font-weight: bold;
      font-size: 36rpx;
      color: #EEEEEE;
      margin: auto;
    }
	}
</style>

